<template>
    <el-drawer
        v-model="isShow"
        title="巡查记录详情"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ tittle }}</h4>
        </template>
        <el-image
        class="mb-3"
        v-if="imgurl != ''"
        style="width: 100px; height: 100px;border:1px solid #dcdfe6"
        :src="imgurl"
        :previewSrcList="srcList" />
        <el-form :model="form"  ref="formRef" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="24" class="tittle">
                    <el-form-item label="巡查信息" label-width="100px" label-position="top" required prop="name">
                        <el-checkbox-group v-model="form.xcDetailList" :disabled="isreadonly">
                            <el-row :gutter="20"> <!-- 设置列间距 -->
                                <el-col :span="8" v-for="(item, index) in checkboxOptions" :key="item.xcContentId">
                                    <el-checkbox :label="item.name" :value="item.xcContentId" />
                                </el-col>
                            </el-row>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="tittle">
                    <el-form-item label="勾选其他时填写" label-width="100px" label-position="top" >
                        <el-input v-model="other" type="textarea" resize="none" :rows="3" :readonly="isreadonly" />
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="tittle">
                    <el-form-item label="具体描述" label-width="100px" label-position="top" >
                        <el-input v-model="info" type="textarea" resize="none" :rows="3" :readonly="isreadonly" />
                    </el-form-item>
                </el-col>
            </el-row>
        
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submitHandle()" v-show="isShowTijiaoBtn">提交</el-button>
            <!-- 取消 -->
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const {proxy} = getCurrentInstance()

import { ContentList,} from "@/api/videoApi/videoApi";
import {recordListInfo} from "@/api/monitors/monitors.js";
const {nj_yuan_type,} = proxy.useDict('nj_yuan_type', )

const isShow = ref(false)
const isreadonly = ref(false)
const imgurl = ref('')
const srcList = ref([])
const info = ref('')
const other = ref('')

const checkboxOptions = ref([])
const isShowTijiaoBtn = ref(true)

const form = ref({})

const tittle = ref('新增巡查记录')
// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
}
const rules = {
    name: [{ required: true, message: "物品名称不能为空", trigger: " " }],
  }
onMounted(() => {
    getContentList()
})
const getContentList = async () => {
    const bodydata = {}
    ContentList(bodydata).then(res => {
        checkboxOptions.value = res.data;
    })
}

  // 新增
const showAdd = async (tittleV) => {
    tittle.value = tittleV

    isShowTijiaoBtn.value = true
    isreadonly.value = false
    
    changeShowStatus()
    // await getDetail(data.planId)
}

// 编辑-查看
const showDetail = async (data,tittleV,TypeV) => {
    tittle.value = tittleV
    
    if(TypeV == 'Edit'){
        isShowTijiaoBtn.value = true
        isreadonly.value = false
    }
    if(TypeV == 'See'){
        isShowTijiaoBtn.value = false
        isreadonly.value = true
    }
    changeShowStatus()
    await recordListInfo(data.xcId).then(res => {
        res.data.xcDetailList.forEach(item => {
        if (item.other) {
            other.value = item.other
        }
        });
      form.value = res.data
      info.value = form.value.xcDetailList[0].info ? form.value.xcDetailList[0].info : info.value
      imgurl.value = res.data.xcpic
      srcList.value[0] = res.data.xcpic
      form.value.xcDetailList = form.value.xcDetailList.map(item => item.xcContentId);

    })
   
}




defineExpose({showDetail,showAdd})


// 获取详情
const getDetail = async (id) => {
    // const res = await getPlanInfo(id)
}

</script>

<style scoped lang="scss">

</style>